<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tow {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 600px;
            /* background-color: rgb(136, 13, 13); */
        }
        
        .one img {
            position: absolute;
            width: 30px;
        }
        /* body {
            background-image: url(./f0c84cdacb14e8be4bc1f1efd814dfdf.jpg);
        } */
        
        .fen {
            font-size: 60px;
        }
    </style>
</head>

<body>
    <div class="fen">0</div>
    <div class="one"></div>
    <div class="tow"><img src="./pen.png" alt=""> </div>
</body>

</html>
<script>
    var one = document.querySelector(".one");
    var tow = document.querySelector(".tow");
    var fen = document.querySelector(".fen");
    var fen1 = 0;


    var cre;

    // 随机数
    function random1(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    // 创建金币
    cre = setInterval(function() {
        var j = 0;
        var luo;
        var money = document.createElement("img");
        money.src = "./jin.png";
        one.appendChild(money);
        var suiji = random1(10, 1000);
        money.style.left = suiji + "px";
        luo = setInterval(function() {
            j += 10;
            money.style.top = j + "px";
            if (j > 600) {
                // console.log("jhj");
                money.remove();
                clearInterval(luo);
            }
            // 最小左边碰撞
            var minleft = money.offsetLeft - tow.offsetWidth;
            var maxleft = money.offsetLeft + money.offsetWidth
                // console.log(minleft, maxleft);

            if (tow.offsetLeft > minleft && tow.offsetLeft < maxleft && money.offsetTop == 550) {
                fen1++;
                fen.innerHTML = fen1;
            }
        }, 100);

        tow.onmousedown = function(e) {

            // var even = e || event
            var x = event.offsetX;
            var y = event.offsetY;
            // console.log(y);
            event.preventDefault();
            window.onmousemove = function(e) {
                var even = e || event;
                tow.style.left = even.clientX - x + "px";

                // console.log(even.offsetX)
            }
        }
        window.onmouseup = function() {
            window.onmousemove = null;
        }
    }, 1000);
</script>